<!--
 * @Author: xiezhiquan3878
 * @Date: 2024-06-23 14:21:51
 * @LastEditors: xiezhiquan3878 xiezhiquan3878
 * @LastEditTime: 2024-06-23 19:28:57
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="demo-drawer-content">
    <div class="header-title">处理问题</div>

    <el-form
      ref="form"
      :model="editData"
      label-width="120px"
      label-position="top"
      size="small"
    >
      <el-form-item label="问题">
        <el-input
          v-model="editData.question"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item
        label="答案"
        style="position: relative"
      >
        <el-input
          v-model="editData.answer_text"
          type="textarea"
          placeholder="请输入"
          :rows="2"
        />
        <!-- <div
          class="btn text-#04D1B8"
          @click="getAnswer"
        >
          一键生成
        </div> -->
      </el-form-item>
      <div class="flex justify-between">
        <el-form-item
          label="是否热点问题"
          class="w-50%"
        >
          <el-radio
            v-model="editData.hot_switch"
            :label="1"
          >
            是
          </el-radio>
          <el-radio
            v-model="editData.hot_switch"
            :label="0"
          >
            否
          </el-radio>
        </el-form-item>
        <el-form-item
          label="问题排序"
          class="w-50%"
        >
          <el-input-number
            v-model="editData.weight"
            placeholder="请输入"
          />
        </el-form-item>
      </div>
      <div class="flex justify-between">
        <el-form-item
          label="答案附件"
          class="w-100%"
        >
          <el-radio
            v-model="editData.attachment_type"
            :label="0"
          >
            链接
          </el-radio>
          <el-radio
            v-model="editData.attachment_type"
            :label="1"
          >
            图片
          </el-radio>
        </el-form-item>

        <el-form-item
          :label="`链接${editData.attachment_type == 1 ? '图片' : '地址'}`"
          class="w-100%"
        >
          <UpImage
            v-if="editData.attachment_type === 1"
            :url="editData.attachment_payload"
            @getImg="getFile2"
          />
          <el-input
            v-else
            v-model="editData.attachment_payload"
            placeholder="请输入"
          />
        </el-form-item>
      </div>
      <el-form-item label="上传视频">
        <div class="border">
          <div class="flex flex-wrap">
            <div class="w-100%">
              <el-radio
                v-model="editData.generate_switch"
                :label="1"
              >
                一键自动生成
              </el-radio>
              <el-radio
                v-model="editData.generate_switch"
                :label="0"
              >
                自主上传视频
              </el-radio>
            </div>
          </div>
          <UpVideo
            url=""
            v-if="!editData.generate_switch"
            :video-flag="!!editData.generate_switch"
            up-text="点击上传视频"
            @getFile="getFile($event)"
          />
          <!-- <UpVideoFile
            :url="editData.icon_url"
            @getImg="setIcon"
          /> -->
        </div>
      </el-form-item>
    </el-form>
    <div class="demo-drawer-footer">
      <el-button @click="cancelFun">取 消</el-button>
      <el-button
        type="primary"
        @click="confirmClick()"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { operaUnmatch, addQuestion } from '@/api/model'
// import UpVideoFile from '@/components/upload/up-video-file.vue'
import UpVideo from '@/components/upload/up-video-file2.vue'
import UpImage from '@/components/upload/up-image2.vue'

export default {
  components: {
    // UpVideoFile,
    UpImage,
    UpVideo
  },
  data() {
    return {
      editData: {
        generate_switch: 0,
        answer_media_file: null,
        attachment_type: 0
      },
      sortList: [],
      id: null
    }
  },
  watch: {
    'editData.attachment_type': {
      handler(val, val2) {
        if (val !== val2 && val !== undefined && val2 !== undefined) {
          this.editData.attachment_payload = undefined
        }
      },
      deep: true
    }
  },
  created() {},
  methods: {
    getFile(file, type) {
      this.editData.answer_media_file = file.raw
    },
    getFile2(file) {
      this.editData.attachment_payload = file
    },
    init(row) {
      console.log(row)
      this.editData = {
        question: row.query,
        generate_switch: 0,
        hot_switch: 0,
        attachment_type: 0
      }
      this.id = row.id
      this.editData = JSON.parse(JSON.stringify(this.editData))
    },
    // 确认
    confirmClick() {
      if (this.editData.generate_switch) {
        let form = {
          model_uniqueid: this.$route.query.uid,
          generate_switch: this.editData.generate_switch,
          question: this.editData.question,
          answer_text: this.editData.answer_text,
          hot_switch: this.editData.hot_switch,
          weight: this.editData.weight,
          attachment_type: this.editData.attachment_type,
          attachment_payload: this.editData.attachment_payload
        }
        addQuestion(form)
          .then((res) => {
            if (res.code === 0) {
              operaUnmatch({
                model_uniqueid: this.$route.query.uid,
                dispose_switch: 1,
                ids: this.id + ''
              })
                .then((resp) => {
                  if (resp) {
                    this.$message({
                      message: '处理成功！',
                      type: 'success'
                    })
                    this.$emit('success')
                  }
                })
                .catch((err) => {
                  console.log(err)
                  this.$message({
                    type: 'error',
                    message: err.msg
                  })
                })
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({
              type: 'error',
              message: err.msg
            })
          })
      } else {
        const formData = new FormData()
        formData.append('model_uniqueid', this.$route.query.uid)
        // formData.append('attachment_type', 0)
        formData.append('generate_switch', this.editData.generate_switch)
        formData.append('question', this.editData.question)
        formData.append('answer_text', this.editData.answer_text)
        formData.append('answer_media_file', this.editData.answer_media_file)
        formData.append('attachment_payload', this.editData.attachment_payload)
        formData.append('attachment_type', this.editData.attachment_type)

        addQuestion(formData)
          .then((res) => {
            if (res.code === 0) {
              operaUnmatch({
                model_uniqueid: this.$route.query.uid,
                dispose_switch: 1,
                ids: this.id + ''
              })
                .then((resp) => {
                  if (resp) {
                    this.$message({
                      message: '处理成功！',
                      type: 'success'
                    })
                    this.$emit('success')
                  }
                })
                .catch((err) => {
                  console.log(err)
                  this.$message({
                    type: 'error',
                    message: err.msg
                  })
                })
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({
              type: 'error',
              message: err.msg
            })
          })
      }
    },
    cancelFun() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
.header-title {
  position: relative;
  padding: 8px 13px;
  font-weight: 600;
  font-size: 20px;
  color: #1c1f23;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 20px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: #04d1b8;
  }
}
.demo-drawer-content {
  margin-top: -10px;
  padding: 0 138px 0;
  height: calc(100vh - 85px);
  overflow-y: auto;
}
.demo-drawer-footer {
  text-align: center;
  margin-top: 10px;
}
::v-deep {
  .el-form-item__label {
    font-weight: 400;
    font-size: 14px;
    color: #1c1f23;
    line-height: 22px;
  }
  .avatar-uploader-box .avatar-uploader .el-upload {
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.btn-fix {
  position: absolute;
  left: 70px;
  top: -36px;
  font-size: 12px;
  cursor: pointer;
}
.box {
  background: #f4f5f9;
  border-radius: 0px 0px 0px 0px;
  padding: 12px;
  .box-item {
    align-items: center;
    img {
    }
  }
  .delete-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 10px;
    padding: 8px;
    cursor: pointer;
  }
}
.add {
  font-weight: 400;
  font-size: 12px;
  display: flex;
  align-items: center;
  img {
    width: 14px;
    height: 14px;
    display: block;
    margin-right: 4px;
  }
}
.btn {
  position: absolute;
  right: 0;
  top: -30px;
  font-weight: 400;
  font-size: 12px;
}
.border {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 20px;
}
</style>
